<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item :label="$t('pay_item')" prop="name">
          <el-input
            v-model="form.name"
            :placeholder="$t('please_enter', { name: $t('pay_item') })"
            :show-word-limit="true"
          />
        </el-form-item>
        <el-form-item :label="$t('payment_amount')" prop="remuneration">
          <el-input
            v-model="form.remuneration"
            :placeholder="$t('please_enter', { name: $t('payment_amount') })"
          />
        </el-form-item>
        <template v-if="form.type == 1">
          <el-form-item :label="$t('effective_date')" prop="effectiveDate">
            <el-date-picker
              clearable
              v-model="form.effectiveDate"
              type="date"
              value-format="yyyy-MM-dd"
              :placeholder="$t('please_select', { name: $t('effective_date') })"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item :label="$t('expiry_date')" prop="expirationDate">
            <el-date-picker
              clearable
              v-model="form.expirationDate"
              type="date"
              value-format="yyyy-MM-dd"
              :placeholder="$t('please_select', { name: $t('expiry_date') })"
            >
            </el-date-picker>
          </el-form-item>
        </template>
        <el-form-item
          :label="$t('period_of_validity')"
          prop="effectiveDate"
          v-else
        >
          <el-date-picker
            clearable
            v-model="form.effectiveDate"
            type="month"
            :placeholder="
              $t('please_select', { name: $t('period_of_validity') })
            "
            value-format="yyyy-MM"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('remarks')" prop="remark">
          <el-input
            v-model="form.remark"
            :placeholder="$t('please_enter', { name: $t('remarks') })"
            type="textarea"
            :rows="4"
            :show-word-limit="true"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">{{
          $t("confirm")
        }}</el-button>
        <el-button @click="cancel">{{ $t("cancel") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
          {
            required: true,
            message: this.$t("cannot_empty", { name: this.$t("pay_item") }),
            trigger: "change",
          },
        ],
        remuneration: [
          {
            required: true,
            message: this.$t("cannot_empty", {
              name: this.$t("payment_amount"),
            }),
            trigger: "blur",
          },
        ],
        effectiveDate: [
          {
            required: true,
            message: this.$t("cannot_empty", {
              name: this.$t("effective_date"),
            }),
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {},
  methods: {
    /** 新增按钮操作 */
    handleAdd(type) {
      this.reset(type);
      this.open = true;
      this.title = `${this.$t("add")}${
        type == 1 ? this.$t("fixed_salary") : this.$t("variable_pay")
      }`;
    },
    handleUpdate(row) {
      this.form = { ...row };
      this.open = true;
      this.title = `${this.$t("edit")}${
        row.type == 1 ? this.$t("fixed_salary") : this.$t("variable_pay")
      }`;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset(type) {
      this.form = {
        name: null,
        remuneration: null,
        type: type,
        effectiveDate: null,
        expirationDate: null,
        remark: null,
      };
      this.resetForm("form");
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.$emit("setPayInfoForm", { ...this.form });
          this.open = false;
        }
      });
    },
  },
};
</script>
<style scoped lang="scss"></style>
